<script src="./node_modules/marked/marked.min.js"></script>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script src="../../dist/mini-vue.js"></script>

<div id="editor">
    <textarea :value="input.value" @input="update"></textarea>
    <div v-html="output.value"></div>
</div>

<script>
    const { ref, computed } = MiniVue;

    MiniVue.createApp({
        setup() {
            const input = ref('# hello');
            const output = computed(() =>
                marked(input.value, {
                    sanitize: true,
                })
            );
            const update = _.debounce((e) => {
                input.value = e.target.value;
            }, 50);

            return {
                input,
                output,
                update,
            };
        },
    }).mount('#editor');
</script>

<style>
    html,
    body,
    #editor {
        margin: 0;
        height: 100%;
        font-family: 'Helvetica Neue', Arial, sans-serif;
        color: #333;
    }

    textarea,
    #editor div {
        display: inline-block;
        overflow: auto;
        width: 50%;
        height: 100%;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 20px;
    }

    textarea {
        border: none;
        border-right: 1px solid #ccc;
        resize: none;
        outline: none;
        background-color: #f6f6f6;
        font-size: 14px;
        font-family: 'Monaco', courier, monospace;
        padding: 20px;
    }

    code {
        color: #f66;
    }
</style>